<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE html>
<html>
  <head>
    <script src="../../polymer.js"></script>
    <script src="../../tools/test/htmltest.js"></script>
    <script src="../../node_modules/chai/chai.js"></script>
  </head>
  <body>
    <x-bar><div id="target">Test</div></x-bar>
    
    <polymer-element name="x-zug" on-test-event="testEventHandler">
      <template>
        x-zug: 
        <div id="xZugDiv" on-test-event="divTestEventHandler">
          <content id="xZugContent" on-test-event="contentTestEventHandler"></content>
        </div>
      </template>
      <script>
        Polymer('x-zug', {
          contentTestEventHandler: function(e, detail, sender) {
            console.log('%s on %s in %s, (4)', e.type, sender.id, this.localName);
            testEvent(sender);
          },
          divTestEventHandler: function(e, detail, sender) {
            console.log('%s on %s in %s, (5)', e.type, sender.id, this.localName);
            testEvent(sender);
          },
          testEventHandler: function(e, detail, sender) {
            console.log('%s on %s host event (6)', e.type, this.localName);
            testEvent(sender);
          }
        });
      </script>
    </polymer-element>
    
    
    <polymer-element name="x-foo" on-test-event="testEventHandler">
      <template>
        <style>
          @host {
              display: block;
              border: 1px solid green;
              padding: 10px;
            }
        </style>
        x-foo: 
        <div id="xFooDiv" on-test-event="divTestEventHandler">
          <x-zug><content id="xFooContent" on-test-event="contentTestEventHandler"></content></x-zug>
        </div>
      </template>
      <script>
        Polymer('x-foo', {
          contentTestEventHandler: function(e, detail, sender) {
            console.log('%s on %s in %s, (3)', e.type, sender.id, this.localName);
            testEvent(sender);
          },
          divTestEventHandler: function(e, detail, sender) {
            console.log('%s on %s in %s, (7)', e.type, sender.id, this.localName);
            testEvent(sender);
          },
          testEventHandler: function(e, detail, sender) {
            console.log('%s on %s host event (8)', e.type, this.localName);
            testEvent(sender);
          }
        });
      </script>
    </polymer-element>
    
    
    <polymer-element name="x-bar" on-test-event="testEventHandler">
      <template>
        <style>
          @host {
            display: block;
            border: 1px solid red;
            padding: 10px;
          }
          
          .clicky {
            border: 1px solid black;
          }
          
        </style>
        x-bar: 
        <x-foo>
          <div class="clicky" id="xBarDiv" on-test-event="divTestEventHandler"><content id="xBarContent" on-test-event="contentTestEventHandler"></content></div>
        </x-foo>
      </template>
      <script>
        Polymer('x-bar', {
          contentTestEventHandler: function(e, detail, sender) {
            window.eventPath = Array.prototype.slice.call(e.path || [], 0);
            eventPath.shift();
            testEvent(sender);
            console.log('%s on %s in %s, (1)', e.type, sender.id, this.localName);
          },
          divTestEventHandler: function(e, detail, sender) {
            console.log('%s on %s in %s, (2)', e.type, sender.id, this.localName);
            testEvent(sender);
          },
          testEventHandler: function(e, detail, sender) {
            console.log('%s on %s host event (9)', e.type, this.localName);
            testEvent(sender);
          }
        });
      </script>
    </polymer-element>
    <script>
      eventPath = [];
      testEvent = function(node) {
        chai.assert.equal(node, eventPath[0], 'Event fired in expected order');
        eventPath.shift();
        // remove shadowRoots since not part of test.
        while (!eventPath[0].localName) {
          eventPath.shift();
        }
      }
      
      document.addEventListener('WebComponentsReady', function() {
        var target = document.querySelector('#target');
        target.dispatchEvent(new CustomEvent('test-event', {bubbles: true}));
        done();
      });
      
    </script>
    
    
  </body>
</html>
